<template>
	<div class="mall_goods_complex">
		<h1 class="mall_goods_complex_title">看了又看</h1>
		<ul>
			<li v-for="(item, index) in goods()">
				<router-link :to="{name: 'goodsDetail', params:{cid: item.cid, id: item.id}}">
					<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.pic" />
					<h1>{{item.title}}</h1>
					<p><del>￥{{item.originalPrice}}</del>￥<i>{{item.price}}</i></p>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
	import LazyImg from "../../components/common/lazy-img.vue";
	export default{
		name:"MallGoodsComplex",
		props:["shopid", "id", "cid"],
		data:function(){
			let that = this;
			return {
				goods:()=>{
					let goods = [], n =0;
					this.$store.state.goods.each((i, item) => {
						if(n<3 && item.shopid === that.shopid && item.cid === that.cid){
							goods.push(item);
							n+=1;
						}else{
							return false;
						}
					});
					return goods;
				}
			}
		},
		components:{
			LazyImg
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	@baseF: 100/1%;
	.mall_goods_complex{
		background-color: #fff;
		margin:10/@base 0 0;
		padding:0 20/@base 10/@base 20/@base;
		h1{
			&.mall_goods_complex_title{
				padding:20/@base 0;
				font-size: 22/@base;
				font-weight: 400;
			}
		}
		ul{
			display:flex;
			li{
				width:@baseF/3;
				margin:0 10/@base 0 0;
				a{
					display: block;
					color:#000;
					span{
						display: block;
						img{
							width:100%;
						}
					}
					h1{
						font-size:20/@base;
						font-weight: 400;
						height:55/@base;
						overflow: hidden;
					}
					p{
						margin:10/@base 0 0;
						del{
							margin-right:10/@base;
							font-size:16/@base;
							color:#ccc;
						}
						i{
							font-style: normal;
						}
					}
				}
			}
		}
	}
</style>